<template>
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="车辆品牌">
          <el-input v-model="searchForm.name" placeholder="车辆品牌"></el-input>
        </el-form-item>
        <el-form-item label="车辆型号">
          <el-input v-model="searchForm.cname" placeholder="车辆型号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-upload" circle @click="insert"></el-button>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="#"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="车辆品牌"
          width="80">
        </el-table-column>
        <el-table-column
          prop="cname"
          label="车辆型号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="ct.tname"
          label="车型动力"
          width="80">
        </el-table-column>
        <el-table-column
          prop="useplay"
          label="适用场景"
          width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.useplay==1">新能源</span>
            <span v-if="scope.row.useplay==2">商务轿车</span>
            <span v-if="scope.row.useplay==3">SUV</span>
            <span v-if="scope.row.useplay==4">MPV</span>
            <span v-if="scope.row.useplay==5">性能跑车</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="color"
          label="车辆颜色"
          width="80">
        </el-table-column>
        <el-table-column
          prop="xianhao"
          label="限号"
          width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.xianhao==1">参与限号</span>
            <span v-if="scope.row.xianhao==2">不参与限号</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="pic"
          label="展示图片"
          width="150">
          <template slot-scope="scope">
            <el-image
              style="width: 20px; height: 20px"
              :src="scope.row.pic"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
            <el-button type="primary" icon="el-icon-edit" circle @click="upd(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="pages"
      @current-change="currentPage">
      </el-pagination>

      <el-drawer
        title="新建/修改车型"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="insertForm" >
            <el-form-item label="车辆品牌" :rules="[{ required: true, message: '车辆品牌不能为空'}]" :label-width="formLabelWidth">
              <el-input v-model="insertForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车辆型号" :rules="[{ required: true, message: '车辆型号不能为空'}]" :label-width="formLabelWidth">
              <el-input v-model="insertForm.cname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车辆颜色" :rules="[{ required: true, message: '车辆颜色不能为空'}]" :label-width="formLabelWidth">
              <el-input v-model="insertForm.color" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车型动力" :rules="[{ required: true, message: '请选择车型动力', trigger: 'change'}]" :label-width="formLabelWidth">
              <el-select v-model="insertForm.tid" placeholder="请选择车型动力">
                <el-option v-for="item in ctype" :label="item.tname" :value="item.t_id" :key="item.tname"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="适用场景" :rules="[{ required: true, message: '请选择适用场景', trigger: 'change'}]" :label-width="formLabelWidth">
              <el-select v-model="insertForm.useplay" placeholder="请选择适用场景">
                <el-option label="新能源" value="1">新能源</el-option>
                <el-option label="商务轿车" value="2">商务轿车</el-option>
                <el-option label="SUV" value="3">SUV</el-option>
                <el-option label="MPV" value="4">MPV</el-option>
                <el-option label="性能跑车" value="5">性能跑车</el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item label="限号":rules="[{ required: true, message: '请选择限号', trigger: 'change'}]" :label-width="formLabelWidth">
              <el-radio-group v-model="insertForm.xianhao">
                <el-radio  label="参与限号" value="1">参与限号</el-radio>
                <el-radio  label="不参与限号" value="2">不参与限号</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:802/up/upload"
                :on-success="handleAvatarSuccess">
                <img v-if="insertForm.pic" :src="insertForm.pic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="save" >确定</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
</template>

<script>
  const axios = require("axios")
    export default {
        name: "list",
      data() {
        return {
          tableData: [],
          searchForm:{
            pageNum:1,
            pageSize:3
          },
          ids:[],
          pages:0,
          dialog:false,
          insertForm:{
          },
          formLabelWidth: '120px',
          ctype:[],


        }
      },
      methods: {
        handleAvatarSuccess(res, file) {
          console.log("%%%%",res)
          this.insertForm.pic=res.imgUrl;
        },
        getCtype(){
          let self = this
          axios({
            method:"get",
            url:"http://localhost:801/cs/car/ctype",
            params:null
          }).then(function (res) {
            console.log(res.data+"@")
            self.ctype = res.data
          })
        },
        upd(id){
          let self = this
          self.dialog=true;
          axios({
            method:"get",
            url:"http://localhost:801/cs/car/getList",
            params:{id:id}
          }).then(function (res) {
            console.log(res.data+"!")
            self.insertForm = res.data
          })
        },
        insert(){
          this.dialog=true;
          this.insertForm={pic:null};
        },
        save(){
          let self = this
          axios({
            method:"post",
            url:"http://localhost:801/cs/car/saveOrUpdate",
            data:self.insertForm
          }).then(function (res) {
            self.getList()
            self.$message.success("数据更新成功")
            self.dialog=false;
          })
        },
        handleClose(done) {

        },
        del(id){
          let self = this
          axios({
            method:"get",
            url:"http://localhost:801/cs/car/del",
            params:{id:id}
          }).then(function (res) {
            self.getList()
            self.$message.success("删除成功")
          })
        },
        onSubmit(){
          this.getList()
        },
        getList(){
          let self = this
          axios({
            method:"get",
            url:"http://localhost:801/cs/car/list",
            params:self.searchForm
          }).then(function (res) {
            console.log(res)
            self.tableData = res.data.content
            self.pages=res.data.totalPages
          })
        },
        handleSelectionChange(row) {
          this.ids=row;
        },
        currentPage(pageNum){
          this.searchForm.pageNum=pageNum
          this.getList()
        }
      },
      created(){
          this.getList()
        this.getCtype()
      }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
